<template>
  <div style="margin-left: 2%;margin-right: 2%;margin-top: 10px">
    <!-- 表单 -->
    <el-card>
      <span style="font-size: 13px">项目编号：</span>
      <el-input v-model="projectSearch.projectCode" placeholder="请输入内容" style="width: 130px"></el-input>

      <span style="font-size: 13px;margin-left: 3%">项目名称：</span>
      <el-input v-model="projectSearch.projectName" placeholder="请输入内容" style="width: 130px"></el-input>


      <span style="font-size: 13px;margin-left: 3%">采购类别：</span>
      <el-select v-model="projectSearch.purchaseCategoryId" placeholder="请选择" style="width: 130px">
        <el-option label="货物类" value="1"></el-option>
        <el-option label="服务类" value="2"></el-option>
        <el-option label="工程类" value="3"></el-option>
      </el-select>

      <span style="font-size: 13px;margin-left: 3%">验收审批状态：</span>
      <el-select v-model="projectSearch.accApproveStatus" placeholder="请选择" style="width: 130px">
        <el-option label="审批通过" value="审批通过"></el-option>
        <el-option label="未审批" value="未审批"></el-option>
        <el-option label="退回" value="退回"></el-option>
      </el-select>

      <div style="display: inline;margin-left: 5%">
        <el-button  size="mini" type="primary" @click="searchCondition">查询</el-button>
        <el-button size="mini" @click="clearSearch">清空查询</el-button>
      </div>
    </el-card>

      <!-- 表格 -->
    <div style="margin-top: 10px;margin-bottom: 10px">
      <el-table
          :data="projectTable"
          style="width: 100%"
          v-loading="loading"
          border
      >
        <el-table-column prop="projectCode" label="项目编号"></el-table-column>
        <el-table-column prop="projectName" label="项目名称"></el-table-column>
        <el-table-column prop="purchaseCategoryName" label="采购类别"></el-table-column>
        <el-table-column prop="purchaseMethod" label="采购方式"></el-table-column>
        <el-table-column prop="budget" label="预算金额"></el-table-column>
        <el-table-column prop="accApproveStatus" label="验收审批"></el-table-column>
        <el-table-column prop="accApproveTime" label="审批通过时间"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{$index,row}">
            <!-- 在这里添加操作按钮 -->
            <span @click="goToManager(row)"
                  :style="{
                       textAlign: 'center',
                       marginLeft: '7px',
                       color:'#409eff',
                         }"
            >验收审批</span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  selectAllAcceptanceApproval,query
} from "@/api/acceptanceApproval/acceptanceApproval.js";


export default {
  data() {
    return {
      projectSearch: {
        projectName: "",
        projectCode: "",
        purchaseCategoryId: "",
        accApproveStatus:"",
      },
      projectTable: [
        // 在这里添加表格数据，此处添加的值仅为测试值，上线代码前请将其删除
        // {
        //   projectId:'1',
        //   projectCode: 'A01001',
        //   projectName: '采购项目1',
        //   categoryName: '货物类',
        //   purchaseMethod: '线下',
        //   budget: 10.04,
        //   accApproveStatus: '未审批',
        //   accApproveTime: '2023-07-02 10:10:21',
        //   action: '验收审批',
        // },
      ],
      projectList: [],
      currentPage: 1,
      pageSize: 20,
      loading: true, // 修改是否显示加载页面
      total: 0,


    };
  },

  mounted() {
    this.onload()
  },

  methods: {

    //初始化
    async onload() {
      let res = await selectAllAcceptanceApproval()
      if (res) {
        this.loading = false
      }
      if (res.data.code === 200) {
        this.projectList = res.data.data.projectVos;
        this.total = res.data.data.total
        this.loadtable(1)
        console.log(this.projectTable)
      } else {
        this.projectList = [];
        this.total = 0;
        this.$message(res.data.msg);
      }
    },
    //分页
    loadtable(index) {
      var i = 0;
      this.projectTable = [];
      for (i = 0; i < this.pageSize; i++) { // 修改此处的pagesize为pageSize
        if ((index - 1) * this.pageSize + i === this.total) {
          break;
        }
        this.projectTable.push(this.projectList[(index - 1) * this.pageSize + i]);
      }
      console.log("table", this.projectTable, "list", this.projectList);
    },



    //分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.loadtable();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.loadtable()
    },


    // 输入关键字查询
    async searchCondition() {
      // 构建查询参数
      let theData = {};
      if (this.projectSearch.projectCode) {
        theData.projectCode = this.projectSearch.projectCode;
      }
      if (this.projectSearch.projectName) {
        theData.projectName = this.projectSearch.projectName;
      }
      if (this.projectSearch.purchaseCategoryId) {
        theData.purchaseCategoryId = this.projectSearch.purchaseCategoryId;
      }
      if (this.projectSearch.accApproveStatus) {
        theData.accApproveStatus = this.projectSearch.accApproveStatus;
      }

      // 调用查询接口
      try {
        let res = await query(theData); // 调用query接口，传入查询参数
        if (res.data.code === 200) {
          this.projectList = res.data.data.projectVos;
          this.total = this.projectList.length;
          this.currentPage = 1; // 重置当前页码
          this.loadtable(1)
        } else {
          this.projectList = [];
          this.total = 0;
          this.$message(res.data.msg);
        }
      } catch (error) {
        console.error("Error querying data:", error);
        this.$message.error("查询数据时出错");
      }
    },

    //清空查询
    clearSearch() {
      Object.keys(this.projectSearch).forEach(index => this.projectSearch[index] = '')
      this.onload()
    },

    goToManager(row) {
      this.$router.push({
        name: 'acceptanceApprovalManger',
        params: {
          projectCode: row.projectCode,
          projectName: row.projectName,
          purchaseCategoryId: row.purchaseCategoryId,
          budget: row.budget,
          accApproveStatus: row.accApproveStatus,
          accSubstatus : row.accSubstatus,
          archiveApproveStatus: row.archiveApproveStatus,
          archiveSubmitStatus : row.archiveSubmitStatus,
          accApproveSuggestion : row.accApproveSuggestion,
          projectId: row.projectId,
        },
      });
    },
  }
};
</script>

<style>

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
